<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>工作计划</title>
    <link rel="stylesheet" href="../../css/base.css" />
	<link rel="stylesheet" href="../../css/info-mgt.css" />
	<link rel="stylesheet" href="../../css/info-reg.css" />
	<link rel="stylesheet" href="../../css/WdatePicker.css" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/common.js"></script>
	<script type="text/javascript" src="../../js/WdatePicker.js"></script>
	<script type="text/javascript" src="../../js/jquery.pagination.js"></script>
  </head>
  
  <body>
    <div class="title"><h2>工作计划</h2></div>
	<div class="table-box">
		<table>
	    	<thead>
	        	<tr>
	            	<th class="num">部门编号</th>
	                <th class="name">部门名称</th>
	                <th class="process">工作时间段</th>
	                <th class="operate">操作</th>
	            </tr>
	        </thead>
	        <tbody id="planTable">
	        	<!-- 工作计划表格 -->
	        </tbody>
	    </table>
	</div>
	<br>
	<!-- 工作计划申请 -->
	<div class="title" id="noticeTopic1"><h2>工作计划申请</h2></div>
	<div class="main" id="noticeTopic2">
	    <p class="short-input ue-clear">
	    	<label>计划时间：</label>
	        <input id="planTime" type="text" placeholder="计划时间" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
	        <span><em>*</em>请输入正确的时间格式</span>
	    </p>
	    <br>
	    <p class="long-input ue-clear">
	    	<label>计划类型：</label>
	        <select id="planType">
	        	<option value="0">--请选择--</option>
	        	<option value="leave">请假</option>
	        	<option value="overTime">加班</option>
	        </select>
	    </p>
	    <br>
	    <p class="short-input ue-clear">
	    	<label>申请详情：</label>
	        <textarea id="noticeTextArea" name="content" placeholder="内容长度不能超过50"></textarea>
	    </p>
	</div>
	<div class="btn ue-clear" id="noticeTopic3">
		<a href="javascript:;" class="confirm" id="confirm">确定</a>
	    <a href="javascript:;" class="clear" id="cleanContent">清空内容</a>
	</div>
	
	
	
	
	
	
	
  </body>
	<script type="text/javascript">
		//确认按钮
		$("#confirm").click(function(){
			//获取申请计划参数
			var planTime=$("#planTime").val();
			var content=$("#noticeTextArea").val();
			var type="";
			if($("#planType option:eq(0)").attr("selected")=="selected"){
				type=$("#planType option:eq(0)").val();
			}else if($("#planType option:eq(1)").attr("selected")=="selected"){
				type=$("#planType option:eq(1)").val();
			}else{
				type=$("#planType option:eq(2)").val();
			}
			//如果一个为空,则不执行提交
			if(planTime.trim()==""||content.trim()==""||type==0){
				return;
			}
			//
			if(content.trim.length>50){
				return;
			}
			//提交
			$.ajax({
			 type:"POST",
			 url:"workPlanManager.action?method=insert",
			 data:"planTime="+planTime+"&content="+content+"&type="+type,
			 success:function(msg){
			 	alert("工作计划申请提交成功");
			 	//情况页面数据
			 	$("#cleanContent").click();
			 }
			});
			
		});
		
		
		//清空内容
		$("#cleanContent").click(function(){
			$("#planTime").val("");
			$("#noticeTextArea").val("");
			$("#planType option:eq(0)").attr("selected",true);
		});
		
		//编辑
		function edit(i){
			//编辑按钮隐藏 保存和取消按钮显示
			$("#edit"+i).css("display","none");
			$("#save"+i).css("display","inline");
			$("#cancel"+i).css("display","inline");
			//星期下拉列表显示
			$("#planTime"+i).css("display","none");
			$("#lblTime"+i).css("display","inline");
			//根据工作时间改变下拉选项
			var leftTime=($("#planTime"+i).text().split("-"))[0];
			var rightTime=($("#planTime"+i).text().split("-"))[1];
			
			$("#selectA"+i).find('option[value="'+leftTime+'"]').attr("selected",true);
			$("#selectB"+i).find('option[value="'+rightTime+'"]').attr("selected",true);
		}
		//保存
		function save(i){
			var leftTime=($("#planTime"+i).text().split("-"))[0];
			var rightTime=($("#planTime"+i).text().split("-"))[1];
			
			if(window.confirm("确认更改吗?")){
				var ltime="";
				var rtime="";
				//修改工作时间
				var id=$("#planId"+i).val();
				for(var j=0;j<7;j++){
					if($("#selectA"+i+" option:eq("+j+")").attr("selected")=="selected"){
						ltime=$("#selectA"+i+" option:eq("+j+")").val();
					}
					if($("#selectB"+i+" option:eq("+j+")").attr("selected")=="selected"){
						rtime=$("#selectA"+i+" option:eq("+j+")").val();
					}
				}
				//如果值没变,则返回
				if(leftTime==ltime&&rightTime==rtime){
					//编辑按钮显示 保存和取消按钮隐藏
					$("#edit"+i).css("display","inline");
					$("#save"+i).css("display","none");
					$("#cancel"+i).css("display","none");
					//星期下拉列表隐藏
					$("#planTime"+i).css("display","inline");
					$("#lblTime"+i).css("display","none");
					return;
				}
				var time=ltime+"-"+rtime;
				window.location="workPlanManager.action?method=update&id="+id+"&time="+time;
			}
		}
		//取消
		function cancel(i){
			//编辑按钮显示 保存和取消按钮隐藏
			$("#edit"+i).css("display","inline");
			$("#save"+i).css("display","none");
			$("#cancel"+i).css("display","none");
			//星期下拉列表隐藏
			$("#planTime"+i).css("display","inline");
			$("#lblTime"+i).css("display","none");
		}
		
		$(function(){
			$.ajax({
			 type:"POST",
			 url:"workPlanManager.action",
			 data:"method=query",
			 success:function(data){
			 	var str="";
			 	for(var i=0;i<data.length;i++){
			 		str+="<input id='planId"+i+"' type='hidden' value="+data[i].planID+" />";
				 	str+="<tr><td class='num'><label>"+data[i].deptId+"</label></td>";
				 	str+="<td class='name'><label>"+data[i].deptName+"</label></td>";
				 	str+="<td width='20%' class='process'><label id='planTime"+i+"'>"+data[i].planTime+"</label>";
				 	str+="<label style='display:none;' id='lblTime"+i+"'>";
				 	str+="<select id='selectA"+i+"'><option value='1'>星期一<option value='2'>星期二<option value='3'>星期三<option value='4'>星期四<option value='5'>星期五<option value='6'>星期六<option value='7'>星期天</select>";
			        str+="------<select id='selectB"+i+"'><option value='1'>星期一<option value='2'>星期二<option value='3'>星期三<option value='4'>星期四<option value='5'>星期五<option value='6'>星期六<option value='7'>星期天</select>";
			        str+="</label></td><td width='20%' class='operate'>"; 
			        
			        //如果登录人部门id等于2 则加入编辑按钮
					if("${login_User.userDeptId }"=="2"){
						str+="<a id='edit"+i+"' onclick='edit("+i+");' href='javascript:;'>编辑</a>";
						str+="<a id='save"+i+"' style='display:none;' onclick='save("+i+");' href='javascript:;'>保存</a>&nbsp;&nbsp;&nbsp;";
						str+="<a id='cancel"+i+"' style='display:none;' onclick='cancel("+i+");' href='javascript:;'>取消</a></td></tr>";
					}else{
						str+="<a>无</a></td></tr>";
					}
			        $("#planTable").html(str);      	
			 	}
			 }
			});
			
		});
	
	
	
	
	//样式
	$("tbody").find("tr:odd").css("backgroundColor","#eff6fa");
	showRemind('input[type=text], textarea','placeholder');
	</script>
</html>
